<template>
	<view class="container">
		<view class="line"></view>
		<form @submit="" @reset="">
			<view class="publishcard-form">
				<view class="publishcard-infoitem">
					<text class="itemtitle">姓名</text>
					<input type="text" value="" placeholder="请填写姓名" placeholder-style="color:#878787"/>
				</view>
				<view class="publishcard-infoitem">
					<text class="itemtitle">擅长</text>
					<u-cell-group :border="false">
						<u-cell-item title="请选择擅长工种" :border-bottom="false" :title-style="{color:'#878787'}" v-on:click="openGrouppopup()"></u-cell-item>
					</u-cell-group>
				</view>
				<view class="publishcard-infoitem">
					<text class="itemtitle">有无货车</text>
					<radio-group>
						<label class="radio">
							<radio value="yes" color="#ff9900"/><text>有</text>
						</label>
						<label class="radio" style="margin-left: 20rpx;">
							<radio value="no" color="#ff9900"/><text>无</text>
						</label>
					</radio-group>
				</view>
				<view class="publishcard-infoitem">
					<text class="itemtitle">售后<text class="titlevalue">（订单进入售后期不得退还保证金，售后期结束可随时退还）</text></text>
					<u-cell-group :border="false">
						<u-cell-item title="请选择售后时间" :border-bottom="false" :title-style="{color:'#878787'}" arrow-direction="down" v-on:click="openSaletimepopup()"></u-cell-item>
					</u-cell-group>
				</view>
				<view class="publishcard-infoitem">
					<text class="itemtitle">名片头像</text>
					<u-upload :action="upImgaction" del-bg-color="#555" max-count="8"></u-upload>
					<text class="rightbottom">{{1}}/{{8}}</text>
				</view>
				
			</view>
			<button form-type="submit" class="submit-btn">发布</button>
		</form>
		<!-- 选择擅长 弹出层 -->
		<u-popup v-model="showGrouppopup" border-radius="20" mode="bottom">
			<view class="groups">
				<view class="groupLeft">
					<view class="maingroup" v-for="(maingroup,maingroupIndex) in mainGroups" :class="{'active-maingroup':activeMain==maingroupIndex}">
						<text>{{maingroup}}</text>
					</view>
				</view>
				<view class="groupRight" style="background-color: #fff;margin-top: 20rpx;">
					<scroll-view scroll-y="true" style="height: 680rpx;width: 100%;padding-bottom: 20rpx;">
							<view class="secgroup" v-for="(secgroupitem,secgroupindex) in 30">
								<text>水电</text>
							</view>
					</scroll-view>
					<view class="confirmselected">
						<text>{{1}}/{{5}}选好了</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 选择售后时间 弹出层 -->
		<u-popup mode="bottom" border-radius="20" v-model="showSaletime">
			<view class="saletimeview">
				<text class="popuptitle">请选择售后时间</text>
				<view class="saletime-list">
					<view class="saletime-item" v-for="(saletime,timeindex) in saletimes" :key="timeindex" :class="{'activesale':activesale==timeindex}" @click="selectSaletime(timeindex)">
						<text>{{saletime}}</text>
					</view>
					<input type="text" value="" class="diytime"placeholder="自定义售后时间" placeholder-style="text-align:center"/>
				</view>
				<view class="confirmsaletime">
					<text>确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showGrouppopup:false,
				mainGroups:['硬装','成品安装','生活服务','家具','招聘监理'],
				activeMain:0,
				showSaletime:false,
				activesale:0,
				//模拟数据 售后时间选择
				saletimes:['10天','20天','一个月','三个月','五个月','六个月'],
				//上传图片地址
				upImgaction:'http://192.168.0.113:8081/upload/upl' 
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title:options.flag=='edit'?'编辑名片':'发布名片'
			})
		},
		methods: {
			openGrouppopup(){
				this.showGrouppopup=true;
			},
			openSaletimepopup(){
				this.showSaletime=true;
			},
			selectSaletime(timeindex){
				this.activesale=timeindex;
			}
		}
	}
</script>

<style lang="scss">
    page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		min-height: 100%;
		.publishcard-form{
			background-color: #FFFFFF;
			height: auto;
			width: 100%;
		}
		.publishcard-infoitem{
		   border-bottom: 1rpx solid #F1F1F1;
		   padding-bottom: 20rpx;
		   display: flex;
		   flex-wrap: wrap;
		   padding-top: 20rpx;
		   .itemtitle{
			   display: block;
			   width: 680rpx;
			   font-size: 28rpx;
			   margin: auto;
		   }
		   input{
			   width: 680rpx;
			   height: 80rpx;
			   font-size: 28rpx;
			   margin: auto;
		   }
		   radio-group{
			   width: 680rpx;
			   height: 80rpx;
			   margin: auto;
			   display: flex;
			   align-items: center;
		   }
		   .titlevalue{
			   color: #BFBFBF;
			   font-size: 23rpx;
		   }
		   .u-upload{
			   width: 700rpx;
			   margin: auto;
			   margin-top: 20rpx;
		   }
		}
		.groups{
			display: flex;
		}
		.groupLeft{
			width:180rpx;
			height: 800rpx;
			background-color: #F1F1F1;
			margin-top: 20rpx;
			.maingroup{
			   width: 100%;
			   height: 80rpx;
			   display: flex;
			   align-items: center;
			   justify-content: center;
			}
			.active-maingroup{
				background-color: #61A3FB;
				color: #fff;
			}
		}
		.groupRight{
			display: flex;
			flex: 1;
			height: 800rpx;
			flex-wrap: wrap;
			.secgroup{
				background-color: #E7ECF2;
				font-size: 28rpx;
				border-radius: 30rpx;
				width: 160rpx;
				padding-top: 15rpx;
				padding-bottom: 15rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
				text-align: center;
				float: left;
			}
			.confirmselected{
			   background-color: #18B566;
			   color: #FFFFFF;
			   height: 80rpx;
			   width: 530rpx;
			   display: flex;
			   align-items: center;
			   justify-content: center;
			   font-size: 30rpx;
			   margin: auto;
			   margin-bottom: 10rpx;
			   border-radius: 10rpx;
			}
		}
		.saletimeview{
			width: 100%;
			margin: auto;
			height: auto;
			padding-bottom: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			background-color: #fff;
			.popuptitle{
				width:680rpx;
				display: block;
				line-height: 80rpx;
				text-align: center;
				font-size: 30rpx;
			}
			.saletime-list{
				width: 680rpx;
				height: auto;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.saletime-item{
				width: 190rpx;
				box-sizing: border-box; 
				border: 1rpx solid #ccc;
				border-radius: 10rpx;
				height: 60rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 25rpx;
			}
			.diytime{
				border-radius: 10rpx;
				border: 1rpx solid #ccc;
				height: 60rpx;
				width: 250rpx;
				margin-top: 20rpx;
				font-size: 25rpx;
				padding-left: 10rpx;
				padding-right: 10rpx;
			}
			.confirmsaletime{
				background-color: #18B566;
				color: #FFFFFF;
				width: 500rpx;
				height: 80rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				margin-top: 20rpx;
			}
			.activesale{
				background-color: #DCF6E9;
				color: #0EAE64;
				box-sizing: content-box;
				border: none;
			}
		}
		.submit-btn{
			background-color: #18B566;
			color: #FFFFFF;
			width: 680rpx;
			height: 90rpx;
			margin: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			margin-top: 50rpx;
			margin-bottom: 20rpx;
		}
		.rightbottom{
			color: #888888;
			font-size: 28rpx;
			display: block;
			width: 680rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: right;
			margin: auto;
		}
		.line{
			width: 100%;
			height: 20rpx;
			background-color: #F4F8FB;
		}
	}
</style>
